<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件</title>

    <style>
        .bgRed{
            background-color: #ff5555;
        }
    </style>

</head>
<body>
<!--new 的 vue 实例会控制这个元素中的所有内容,也是MVVM中的 V -->
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加页面</h3>
        </div>
        <div class="panel-body form-inline">
            <label>Id: <input type="text" class="form-control" v-model="id"/></label>
            <label>Name: <input type="text" class="form-control" v-model="name"/></label>
            <label>出版日期: <input type="text" class="form-control" v-model="data"/></label>
            <label>价格: <input type="text" class="form-control" v-model="pace"/></label>
            <label>购买数量: <input type="text" class="form-control" v-model="sum"/></label>
            <input type="button" value="添加" class="btn btn-primary" @click="add"/>

        </div>
        <div class="panel-heading">
            <h3 class="panel-title">搜索页面</h3>
        </div>
        <div class="panel-body form-inline">
            <label>搜索关键字: <input type="text" class="form-control" v-model="keywords"/></label>
        </div>
    </div>

    <div class="panel-heading">
        <h3 class="panel-title">列表页面</h3>
    </div>
    <table class="table table-bordered table-hover table-striped"  >
        <thead>
        <tr>
            <th><input type="checkbox" id="checkAll" class="bgRed"></th>
            <th>Id</th>
            <th>Name</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>

        </tr>
        </thead>
        <tbody>
        <!--自定义 search 方法，把关键字通过传参的形式，传递给 search方法,在 search 方法内部，通过 执行 for循环，把所有符合 搜索关键字的数据，保存到一个新数据中，返回 -->
        <tr v-for="item in search(keywords)" :key="item.id" >
            <td><input type="checkbox"  class="bgRed":class="bgRed" ></td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{item.data}}</td>
            <td>{{item.pace}}</td>
<!--            <td>{{formatToParts(item.pace)}}</td>-->
            <td><button v-on:click="minus(item)">-</button>{{item.sum}}<button v-on:click="addsum(item)">+</button></td>
            <td>
              <button @click.prevent="del(item.id)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
    <h3>总价格：￥{{total}} </h3>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //创建一个vue的实例,也是MVVM中的 VM调度者,里面可传配置对象
    var vm = new Vue({
        el:"#app",
        //data指MVVM中的 M ,用来存 el 中用的数据
        data:{
            data:"",
            pace:"",
            id:"",
            name:"",
            keywords:"",
            list:[
                {id:0, name:'《Java从入门到放弃》',  data: '2010-11', pace: 80.00,sum:2,},
                {id:1, name:'《AAA从入门到放弃》',   data: '2010-11', pace: 80.00,sum:5,},
                {id:2, name:'《BBB从入门到放弃》',   data: '2010-11', pace: 80.00,sum:1,},
                {id:3, name:'《CCC从入门到放弃》',   data: '2010-11', pace: 80.00,sum:7,},
                {id:4, name:'《DDD从入门到放弃》',   data: '2010-11', pace: 80.00,sum:1,}
            ]

        },
        //计算属性
        computed: {
            total:function () {
                return this.list.reduce((x,y) => x + y.pace*y.sum,0);
            },
            formatToParts:function (item){
                return pace => '￥' + pace.toFixed(2);
            },

        },
        methods:{
            addsum: function (item, $event) {
                item.sum++;
            },

            minus: function (item, $event) {
                if(item.sum>1){
                    item.sum--
                }
                else item.sum=1;

            },
            add:function(){
                var abc = {id:this.id, name:this.name,data:this.data,pace:this.pace,sum:this.sum}
                this.list.push(abc);
                this.id = this.name = ""
            },
            //        删除事件逻辑：
            //          1.删除的时候一般是根据 id 来进行删除的
            //          2.给个点击事件，取消默认事件，因为要通过id来删，所以将id传个参    @click.prevent="del(item.id)"
            //          3.定义 del 的方法（函数，点击事件）
            //          4.函数中 传参id，根据id删除数据
            //          5.分析：
            //              i:根据id，找到当前的索引
            //              ii:找到索引了，根据 数组的 splice 方法进行删除
            //          6.注意： forEach  some  filter  findIndex     这些都属于数组的新方法
            //              forEach : 没有办法终止
            //              some : 通过 return:true 可以终止
            //              filter : 过滤，符合条件的
            //              findIndex : 找到数组对应的索引,专门查找索引
            //          7.之所以用到some ，是因为找到要删除的 id后，就终止了循环
            //              some和findIndex的区别：some方法中可以做任何事情，但是findIndex是专门用来查索引的
            del:function(id){
                //              一种写法：
                //              this.list.some((item,i)=>{
                //                 if(item.id == id){
                //                   .splice(2,3) 从索引为 i(或者2) 开始，删除 1(或者3) 个
                //                   this.list.splice(i,1)
                //                   终止循环
                //                   return true;
                //                 }
                //              });
                //              另一种写法：
                var index = this.list.findIndex(item =>{
                    if(item.id == id){
                        return true;
                    }
                });
                this.list.splice(index,1)
            },

            search:function(keywords){
                var newList = []
                this.list.forEach(item=>{
                    if(item.name.indexOf(keywords) != -1){
                        newList.push(item)
                    }
                })
                return newList;


                //          return this.list.filter(item =>{
                //            if(item.name.indexOf(keywords) != -1)
                //              ES6中，为字符串提供了一个新的方法，String.prototype.includes('要包含的字符串'),如果包含，则返回 true ，否则返回 false
                //              if(item.name.includes(keywords)){
                //                 return  item
                //              }
                //           })
            }
        }
    })



</script>
</body>
</html>